
import React, { Component } from 'react';
import {
    StyleSheet,
    WebView,
    BackAndroid,
    Dimensions,
    View,
    Image,
    DeviceEventEmitter,
    TouchableOpacity,
    BackHandler
} from 'react-native';

import Loading from '../../common/Loading';
import NavigationBar from '../../common/NavigationBar'

let canGoBack = false;

export default class AdvView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            requestUrl: this.props.navigation.state.params.advURL,
        };
        this.onNavigationStateChange = this.onNavigationStateChange.bind(this);
        this.goBack = this.goBack.bind(this);
    }

    componentDidMount() {
        DeviceEventEmitter.addListener('RefreshPricePage', () => {
            global.log('requestUrl----------:' + this.state.requestUrl);
            this.setState({
                requestUrl: this.props.navigation.state.params.advURL,
            });
        });
    }

    componentWillUnmount() {
        BackHandler.removeEventListener('RefreshPricePage', this.goBack);
    }


    onNavigationStateChange(navState) {
        canGoBack = navState.canGoBack;
    }

    goBack() {
        if (canGoBack) {
            this.webview.goBack();
            return true;
        }
        return this.props.navigation.goBack;
    }

    renderLoading() {
        return <Loading />;
    }

    render() {
        const { navigator, route } = this.props;
        return (
            <View style={styles.container}>
                <NavigationBar
                    title={'广告'}
                    style={styles.navigatorBar}
                    leftButton={this.renderLeftButton(require('../../assets/imgs/back.png'))}
                />
                <WebView
                    ref={(ref) => { this.webview = ref; }}
                    automaticallyAdjustContentInsets={false}
                    style={{ flex: 1 }}
                    source={{ uri: this.state.requestUrl }}
                    javaScriptEnabled
                    domStorageEnabled
                    startInLoadingState
                    scalesPageToFit
                    decelerationRate="normal"
                    onShouldStartLoadWithRequest={() => {
                        const shouldStartLoad = true;
                        return shouldStartLoad;
                    }}
                    onNavigationStateChange={this.onNavigationStateChange}
                    renderLoading={this.renderLoading}
                />
            </View>
        );
    }
    // 渲染按钮
    renderLeftButton(image) {
        return <TouchableOpacity
            style={{ padding: 8 }}
            onPress={() => {
                this.props.navigation.goBack();
            }}>
            <Image
                style={{ width: 34, height: 34 }}
                source={image} />
        </TouchableOpacity>;
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column'
    },
    spinner: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.65)'
    },
    spinnerContent: {
        justifyContent: 'center',
        width: Dimensions.get('window').width * (7 / 10),
        height: Dimensions.get('window').width * (7 / 10) * 0.68,
        backgroundColor: '#fcfcfc',
        padding: 20,
        borderRadius: 5
    },
    spinnerTitle: {
        fontSize: 18,
        color: '#313131',
        textAlign: 'center',
        marginTop: 5
    },
    shareContent: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    shareIcon: {
        width: 40,
        height: 40
    }
});